<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="收款码管理"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 积分比例列表 -->
      <view class="ratio-list">
        <view
          v-for="(ratio, index) in ratioList"
          :key="ratio.id"
          class="ratio-item"
        >
          <!-- 积分比例标题 -->
          <view class="ratio-header">
            <text class="ratio-title">积分比例</text>
            <view class="switch-wrapper">
              <text class="switch-label">设为默认</text>
              <switch
                :checked="ratio.isDefault"
                :disabled="ratio.disabled"
                color="#ff9500"
                @change="handleSwitchChange(ratio, $event)"
              />
            </view>
          </view>

          <!-- 积分比例值 -->
          <view class="ratio-value-section">
            <text class="ratio-value">{{ ratio.value }}%</text>
            <view class="more-btn" @click="showActionMenu(ratio, index)">
              <text class="more-icon">···</text>
            </view>
          </view>

          <!-- 提示信息 -->
          <view v-if="ratio.tips" class="ratio-tips">
            <text class="tips-text">{{ ratio.tips }}</text>
          </view>
        </view>
      </view>

      <!-- 添加比例按钮 -->
      <view class="add-btn" @click="handleAddRatio">
        <text class="add-btn-text">添加比例</text>
      </view>
    </view>

    <!-- 操作菜单 -->
    <uni-popup ref="actionMenuRef" type="bottom">
      <view class="action-menu">
        <view class="action-item" @click="handleEdit">
          <uni-icons type="compose" size="20" color="#ff9500"></uni-icons>
          <text class="action-text">修改</text>
        </view>
        <view class="action-item delete" @click="handleDelete">
          <uni-icons type="trash" size="20" color="#ff4d4f"></uni-icons>
          <text class="action-text">删除</text>
        </view>
        <view class="action-cancel" @click="closeActionMenu">
          <text>取消</text>
        </view>
      </view>
    </uni-popup>

    <!-- 积分比例选择器 -->
    <uni-popup ref="ratioPickerRef" type="bottom">
      <view class="ratio-picker-modal">
        <view class="picker-header">
          <text class="picker-cancel" @click="closeRatioPicker">取消</text>
          <text class="picker-title">积分比例</text>
          <text class="picker-confirm" @click="confirmRatio">确定</text>
        </view>

        <picker-view
          class="picker-view"
          :value="pickerValue"
          @change="pickerChange"
          :indicator-style="indicatorStyle"
        >
          <picker-view-column>
            <view
              v-for="(ratio, index) in ratioOptions"
              :key="index"
              class="picker-item"
            >
              {{ ratio }}%
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 积分比例列表
const ratioList = ref([
  {
    id: 1,
    value: 20,
    isDefault: true,
    disabled: true,
    tips: "*该比例为套约比例不可禁用",
  },
  {
    id: 2,
    value: 3,
    isDefault: false,
    disabled: false,
    tips: "",
  },
]);

// 操作菜单引用
const actionMenuRef = ref(null);

// 当前选中的比例
const currentRatio = ref(null);
const currentIndex = ref(-1);

// 比例选择器相关
const ratioPickerRef = ref(null);
const ratioOptions = ref([]); // 3% 到 20% 的所有整数比例
const pickerValue = ref([0]);
const selectedRatioValue = ref(3);
const indicatorStyle = "height: 50px;";

// 初始化比例选项（3% - 20%）
const initRatioOptions = () => {
  const options = [];
  for (let i = 3; i <= 20; i++) {
    options.push(i);
  }
  ratioOptions.value = options;
};

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 切换默认状态
const handleSwitchChange = (ratio, event) => {
  if (ratio.disabled) {
    uni.showToast({
      title: "该比例不可修改",
      icon: "none",
    });
    return;
  }

  const isChecked = event.detail.value;

  if (isChecked) {
    // 取消其他项的默认状态
    ratioList.value.forEach((item) => {
      if (item.id !== ratio.id && !item.disabled) {
        item.isDefault = false;
      }
    });
    ratio.isDefault = true;

    uni.showToast({
      title: "已设为默认",
      icon: "none",
    });

    // TODO: 调用API保存默认设置
  } else {
    ratio.isDefault = false;
  }
};

// 显示操作菜单
const showActionMenu = (ratio, index) => {
  if (ratio.disabled) {
    uni.showToast({
      title: "该比例不可修改或删除",
      icon: "none",
    });
    return;
  }

  currentRatio.value = ratio;
  currentIndex.value = index;
  actionMenuRef.value?.open();
};

// 关闭操作菜单
const closeActionMenu = () => {
  actionMenuRef.value?.close();
};

// 修改
const handleEdit = () => {
  closeActionMenu();

  uni.showModal({
    title: "修改积分比例",
    editable: true,
    placeholderText: "请输入积分比例",
    success: (res) => {
      if (res.confirm && res.content) {
        const newValue = parseFloat(res.content);
        if (isNaN(newValue) || newValue < 0 || newValue > 100) {
          uni.showToast({
            title: "请输入0-100之间的数字",
            icon: "none",
          });
          return;
        }

        currentRatio.value.value = newValue;
        uni.showToast({
          title: "修改成功",
          icon: "none",
        });

        // TODO: 调用API保存修改
      }
    },
  });
};

// 删除
const handleDelete = () => {
  closeActionMenu();

  uni.showModal({
    title: "确认删除",
    content: `确定要删除${currentRatio.value.value}%的积分比例吗？`,
    confirmColor: "#ff4d4f",
    success: (res) => {
      if (res.confirm) {
        ratioList.value.splice(currentIndex.value, 1);
        uni.showToast({
          title: "删除成功",
          icon: "none",
        });

        // TODO: 调用API删除
      }
    },
  });
};

// 打开比例选择器
const handleAddRatio = () => {
  if (ratioOptions.value.length === 0) {
    initRatioOptions();
  }
  // 默认选中3%（第一个）
  pickerValue.value = [0];
  selectedRatioValue.value = ratioOptions.value[0];
  ratioPickerRef.value?.open();
};

// 关闭比例选择器
const closeRatioPicker = () => {
  ratioPickerRef.value?.close();
};

// picker值改变
const pickerChange = (e) => {
  const index = e.detail.value[0];
  selectedRatioValue.value = ratioOptions.value[index];
  pickerValue.value = [index];
};

// 确认选择比例
const confirmRatio = () => {
  // 检查是否已存在该比例
  const exists = ratioList.value.some(
    (item) => item.value === selectedRatioValue.value
  );

  if (exists) {
    uni.showToast({
      title: "该比例已存在",
      icon: "none",
    });
    closeRatioPicker();
    return;
  }

  const newRatio = {
    id: Date.now(),
    value: selectedRatioValue.value,
    isDefault: false,
    disabled: false,
    tips: "",
  };

  ratioList.value.push(newRatio);
  closeRatioPicker();

  uni.showToast({
    title: "添加成功",
    icon: "none",
  });

  // TODO: 调用API保存
};

// 页面挂载时初始化
onMounted(() => {
  initRatioOptions();
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
  padding-bottom: 140rpx;
}

// 积分比例列表
.ratio-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.ratio-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

// 比例头部
.ratio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.ratio-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.switch-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.switch-label {
  font-size: 26rpx;
  color: #666;
}

// 比例值区域
.ratio-value-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.ratio-value {
  font-size: 56rpx;
  color: #333;
  font-weight: 700;
}

.more-btn {
  padding: 8rpx 16rpx;

  &:active {
    opacity: 0.6;
  }
}

.more-icon {
  font-size: 36rpx;
  color: #999;
  font-weight: 700;
  letter-spacing: 4rpx;
}

// 提示信息
.ratio-tips {
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}

.tips-text {
  font-size: 24rpx;
  color: #ff4d4f;
}

// 添加比例按钮
.add-btn {
  position: fixed;
  bottom: 32rpx;
  left: 32rpx;
  right: 32rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    opacity: 0.9;
  }
}

.add-btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 600;
}

// 操作菜单
.action-menu {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 32rpx;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:active {
    background-color: #f9f9f9;
  }

  &.delete {
    .action-text {
      color: #ff4d4f;
    }
  }
}

.action-text {
  font-size: 28rpx;
  color: #333;
}

.action-cancel {
  padding: 24rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  border-top: 16rpx solid #f5f5f5;
  margin: 0 -32rpx;
  padding: 24rpx 32rpx;

  &:active {
    background-color: #f9f9f9;
  }
}

// 比例选择器
.ratio-picker-modal {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-cancel {
  font-size: 28rpx;
  color: #666;

  &:active {
    opacity: 0.6;
  }
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.picker-confirm {
  font-size: 28rpx;
  color: #ff9500;

  &:active {
    opacity: 0.6;
  }
}

.picker-view {
  height: 400rpx;
  padding: 0 32rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  line-height: 50px;
  font-size: 32rpx;
  color: #333;
}
</style>
